<template>
  <div class="distribute-btn">
    <el-button v-if="!noBtn" @click="openDialog">分配</el-button>
    <move-dialog
      :visible="visible"
      :before-close="closeDialog"
      width="480px"
      :close-on-click-modal="false"
      title="分配"
    >
      <distribute-form ref="distributeForm"></distribute-form>
      <template #footer>
        <el-button link @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </template>
    </move-dialog>
  </div>
</template>

<script lang="ts">
/**
 * 分配按钮
 */
import { defineComponent, getCurrentInstance, nextTick, reactive, toRefs } from 'vue'
import moveDialog from '@common/components/move-dialog/index.vue'
import distributeForm from './form.vue'
import { disCus, batchDis } from '@app/customer/apis/pool'
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: 'DistributeBtn',
  components: { moveDialog, distributeForm },
  props: {
    customerId: {
      type: String,
      default: ''
    },
    noBtn: {
      type: Boolean,
      default: false
    }
  },
  emits: ['onClearBatchSelect', 'onUpdateOwner'],
  setup(props, { emit }) {
    const state = reactive({
      visible: false,
      ids: [], // 批量选中
      condition: {}, //全选
      isBatch: false, // 是否为批量选中
      rules: {
        owner: [{ required: true, trigger: 'change', message: '请选择座席' }]
      }
    })

    const instance: any = getCurrentInstance()

    const openDialog = async (ids?: any, condition?: any, batch?: boolean) => {
      if (batch) {
        state.isBatch = true
        state.ids = ids
        state.condition = condition
      } else {
        state.isBatch = false
      }
      state.visible = true
      await nextTick()
      instance?.refs.distributeForm.clearData() // 清空数据
    }

    const closeDialog = () => {
      state.visible = false
    }

    // 提交
    const submit = () => {
      instance?.refs.distributeForm.checkForm().then(async (valid: any) => {
        console.log(valid, 66)
        if (valid.status) {
          let res: any = {}
          if (state.isBatch) {
            res = await batchDis({
              ids: state.ids,
              condition: state.condition,
              ...valid.form
            })
          } else {
            const param = { ...instance?.refs.distributeForm.form, customerId: props.customerId }
            res = await disCus(param)
          }
          if (res.success) {
            ElMessage.success('操作成功')
            closeDialog()
            if (state.isBatch) {
              emit('onClearBatchSelect')
            } else {
              emit('onUpdateOwner', instance?.refs.distributeForm.form.owner)
            }
          }
        }
      })
    }

    return {
      ...toRefs(state),
      openDialog,
      closeDialog,
      submit
    }
  }
})
</script>
<style lang="stylus" scoped>
.distribute-btn
  .btn
    background: var(--mc-gray4-color)
    border-radius: 4px
    padding: 8px 16px
    color: rgba(0, 0, 0, 0.88)
  .MC_icon-hujiaohuojieting
    color: var(--mc-success-color)
  .el-button
    margin-left 20px
    height 30px !important
</style>
